GoodsCard 组件

介绍

商品卡片，常见于首页、搜索页，用于展示单个商品信息，包括商品图片、商品价格等。

👉🏻 项目组件使用备注

用法

基本引入

import { FQGoodsCard } from '@fq/fq-weapp-ui-pro';

组件依赖的样式文件（仅按需引用时需要）

import '@fq/fq-weapp-ui-pro/dist/styles/components/goods-card.scss';

基础用法

<FQGoodsCard
  layout='column'
  badgeNum={1}
  goodsName='酱卤猪头肉 不含防腐剂 配料表干净'
  imageUrl='https://stantic.ifengqun.com/front/fq-oms-extsys/upload/1d0dc847a0cd20135a65f50e4949a3c4.jpg?x-oss-process=image/format,webp/interlace,1'
  sellingPoint='脆甜多汁糖心实在SGS检测'
  salesVolume='1000万'
  niceRate='99.9%'
  price={100}
  promoLabelText='今日热销8724件'
  originalPrice={113}
  coupon={[{ text: '新人券-立减6元' }, { text: '超值换购' }]}
  actionArea={<FQGoodsCard.PlusButton />}
/>

<FQGoodsCard
  badgeNum={1}
  goodsName='酱卤猪头肉 不含防腐剂 配料表干净'
  imageUrl='https://stantic.ifengqun.com/front/fq-oms-extsys/upload/1d0dc847a0cd20135a65f50e4949a3c4.jpg?x-oss-process=image/format,webp/interlace,1'
  sellingPoint='脆甜多汁糖心实在SGS检测'
  salesVolume='1000万'
  niceRate='99.9%'
  price={100}
  promoLabelText='今日热销8724件'
  originalPrice={113}
  coupon={[{ text: '新人券-立减6元' }, { text: '超值换购' }]}
  actionArea={<FQGoodsCard.PlusButton />}
/>

<FQGoodsCard
  badgeNum={1}
  layout='column'
  size='small'
  goodsName='酱卤猪头肉 不含防腐剂 配料表干净'
  imageUrl='https://stantic.ifengqun.com/front/fq-oms-extsys/upload/1d0dc847a0cd20135a65f50e4949a3c4.jpg?x-oss-process=image/format,webp/interlace,1'
  sellingPoint='脆甜多汁糖心实在SGS检测'
  salesVolume='1000万'
  price={100}
  originalPrice={113}
  actionArea={<FQGoodsCard.PlusButton />}
/>

自定义排行榜标签 & 促销标签

<FQGoodsCard
  goodsName='酱卤猪头肉 不含防腐剂 配料表干净'
  imageUrl='https://stantic.ifengqun.com/front/fq-oms-extsys/upload/1d0dc847a0cd20135a65f50e4949a3c4.jpg?x-oss-process=image/format,webp/interlace,1'
  price={100}
  promoLabelText='今日热销1234件'
  showPromoLabel
  rankingLabelText='食品生鲜热销榜第10名'
  showRankingLabel
  onRankingLabelClick={() => {
    console.log('排行榜点击');
  }}
/>

自定义促销相关描述

<FQGoodsCard
  goodsName='酱卤猪头肉 不含防腐剂 配料表干净'
  imageUrl='https://stantic.ifengqun.com/front/fq-oms-extsys/upload/1d0dc847a0cd20135a65f50e4949a3c4.jpg?x-oss-process=image/format,webp/interlace,1'
  salesVolume='1000万'
  niceRate='99%'
  reviewCount={100}
  sellingPoint='脆甜多汁糖心实在SGS检测'
  coupon={[{ prefix: '新人券', text: '立减6元' }, { text: '超值换购' }]}
  price={100}
/>

自定义营销标签

<FQGoodsCard
  layout='column'
  goodsName='酱卤猪头肉 不含防腐剂 配料表干净'
  imageRound={false}
  imageUrl='https://stantic.ifengqun.com/front/fq-oms-extsys/upload/1d0dc847a0cd20135a65f50e4949a3c4.jpg?x-oss-process=image/format,webp/interlace,1'
  sellingPoint='脆甜多汁糖心实在SGS检测'
  salesVolume='1000万'
  marketingLabel={{
    labelText: '限时秒杀',
    dateText: '距结束2天03:22:23',
    salesVolume: '已抢1000万件',
  }}
  showMarketingLabel
  actionArea={<FQGoodsCard.ComposeButton />}
/>

自定义营销标签-会员价

非会员

 <FQGoodsCard
    layout='column'
    size='middle'
    goodsName='酱卤猪头肉 不含防腐剂 配料表干净'
    imageUrl='https://stantic.ifengqun.com/front/fq-oms-extsys/upload/1d0dc847a0cd20135a65f50e4949a3c4.jpg?x-oss-process=image/format,webp/interlace,1'
    sellingPoint='脆甜多汁糖心实在SGS检测'
    salesVolume='1000万'
    price={100}
    originalPrice={113}
    showMarketingLabel
    priceProps={{
      showSuffixText: true,
      priceAfter: '券后价',
    }}
    showMemberLabel
    isMember={false}
    vipPrice='会员价 ¥50'
    marketingLabel={{
      labelText: '爆品活动',
      dateText: '2天 03:22:23',
    }}
    actionArea={<FQGoodsCard.PlusButton />}
  />

#### 会员
  <FQGoodsCard
    layout='column'
    size='middle'
    goodsName='酱卤猪头肉 不含防腐剂 配料表干净'
    imageUrl='https://stantic.ifengqun.com/front/fq-oms-extsys/upload/1d0dc847a0cd20135a65f50e4949a3c4.jpg?x-oss-process=image/format,webp/interlace,1'
    sellingPoint='脆甜多汁糖心实在SGS检测'
    salesVolume='1000万'
    price={100}
    originalPrice={113}
    showMarketingLabel
    marketingLabel={{
      dateText: '2天 03:22:23',
      labelIcon:'https://stantic.ifengqun.com/front/fq-oms-extsys/upload/1d0dc847a0cd20135a65f50e4949a3c4.jpg?x-oss-process=image/format,webp/interlace,1',
    }}
    showMemberLabel
    isMember
    vipPrice='会员价500'
    priceProps={{
      showSuffixText: true,
      priceAfter: {
        text: '会员专享',
      },
    }}
    actionArea={<FQGoodsCard.PlusButton />}
  />

售罄卡片

<FQGoodsCard
  goodsName='酱卤猪头肉 不含防腐剂 配料表干净'
  goodsNameLine={2}
  imageUrl='https://stantic.ifengqun.com/front/fq-oms-extsys/upload/1d0dc847a0cd20135a65f50e4949a3c4.jpg?x-oss-process=image/format,webp/interlace,1'
  salesVolume='1000万'
  price={100}
  isNoStock
/>

API

属性

参数	说明	类型	默认值	版本
badgeNum	左上角序号	number	-
coupon	优惠券	`FQCardCoupon[]`	-	`v0.6.0` 旧 `string[]` / `[string, string][]` 格式已移除
formatOriginalPrice	格式化原价(仅在垂直布局大卡片时生效)	`(originalPrice: string \| number) => string \| number`	`最低到手¥xxx起`	`v0.2.7`
goodsBadge	商品徽章	ReactNode	-	`v0.2.7`
goodsName	商品名称	string	-
goodsNameLine	商品名称行数，默认2，即2行省略	`number` / `string`	2
goodsNameOverflow	商品名称溢出方式	`ellipsis` / `clip`	`clip`
isMember	是否会员，只有设置了showMemberLabel才生效	boolean	`false`
isNoStock	是否无库存	boolean	`false`
isNoStock	是否无库存	boolean	`false`
marketingLabel	营销标签	`{ labelText?: string, labelImage?: string, dateText?: string, salesVolume?: string }`	-
marketingLabelProps	营销标签配置	`{ bgUrl?: string }`	-
niceRate	惊艳度	`number` / `string`	-
originalPrice	原价	`number` / `string`	-
price	价格	`number` / `string`	-
priceAfterText	价格后的文案	string	-	`v0.2.7` 中已移除
priceProps	价格配置，price props	`Omit<PriceProps, 'originalPrice' \| 'price'>`	-	`v0.2.7`
promoLabelProps	促销标签配置	`{ bgColor?: string; color?: string; icon?: string }`	-
promoLabelText	促销标签文案	string	-
rankingLabelText	排名信息	string	-
reviewCount	评价数量	`number` / `string`	-
salesVolume	销量	`number` / `string`	-
sellingPoint	卖点	string	-
customMarketingText	自定义营销文案（如果已有的销量那一行不满足样式，可使用当前参数）	string	-
showMarketingLabel	是否显示营销标签	boolean	`false`
showPromoLabel	是否显示促销标签	boolean	`false`
showRankingLabel	是否显示排名	boolean	`false`
showMemberLabel	是否显示会员标签	boolean	`false`
onRankingLabelClick	rankingLabel 点击事件	`() => void`	-
vipPrice	会员价文案, 只有设置了showMemberLabel，并且isMember=false才展示	`string`	-

更多配置参考[FQCard](../components/presentation/Card 卡片.mdx)。

FQCardCoupon

优惠券类型，v0.3.0 新增。

参数	说明	类型	默认值
prefix	优惠券前缀	string	-
prefixStyle	优惠券前缀样式	CSSProperties	-
text	优惠券文案	string	-
style	优惠券样式	CSSProperties	-

从使用者角度，传入的方式相比之前的复杂了；但因业务扩展，这种方式可以更好扩展卡片优惠券标签的样式。如：直播间小绿车-直播间专享优惠券。

插槽

参数	说明	类型	默认值	版本
goodsBadge	商品徽章	ReactNode	-	`v0.2.7`
priceSlot	原有 FQCard price 插槽	ReactNode	-	`v0.5.1`

其余与[FQCard](../components/presentation/Card 卡片.mdx)插槽一致，传入时将覆盖原位置预插入的元素。

GoodsCard.ComposeButton

卡片组合购物按钮组件，常用于商品大卡片。

参数	说明	类型	默认值
buyBtnProps	购买按钮 button props	object	-
buyText	购买按钮文本	ReactNode	'购买'
cartBtnProps	购物车按钮 button props	object	-
cartText	购物车按钮文本	ReactNode	`<Image />`
disabled	按钮禁用	boolean	false
onAddCart	点击购物车按钮时回调	`(event: ITouchEvent) => void`	-
onBuy	点击购买按钮时回调	`(event: ITouchEvent) => void`	-
onClick	点击按钮时回调	`(event: ITouchEvent) => void`	-

GoodsCard.PlusButton

卡片按钮组件，常用于商品小卡片。

属性和事件和 FQButton 一致，更多配置参考 Button 组件。

FAQ

如果卡片右下方的按钮，预设的两种按键 GoodsCard.ComposeButton、 GoodsCard.PlusButton 满足不了业务场景时，如何自定义按钮？

你可以通过 actionArea 传入自定义组件来定义。

假设营销标签模块、或促销相关描述的布局已经和 FQGoodsCard 差异比较大时？

你可以通过传入 FQCard 相关的插槽，进行覆盖 FQGoodsCard 预插入内容，因为 FQGoodsCard 继承至 FQCard。

假设 salesVolume 销量、 niceRate 惊艳度的文案样式已经不能满足业务场景，如何自定义文案和样式？

你可以通过 customMarketingText 传入自定义组件来定义。

介绍​

用法​

基本引入​

基础用法​

自定义排行榜标签 & 促销标签​

自定义促销相关描述​

自定义营销标签​

自定义营销标签-会员价​

非会员​

售罄卡片​

API​

属性​

FQCardCoupon​

插槽​

GoodsCard.ComposeButton​

GoodsCard.PlusButton​

FAQ​

介绍

用法